<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .bigbox{
        width: 500px;
        height: 200px;
        overflow: hidden;
        position: relative;
        margin: auto;
    }
    .slider{
        width: 2500px;
        height: 200px;
        margin: auto;
        position: absolute;
        left: 0px;
        transition: left .5s;
    }
    li{
        width: 500px;
        height: 200px;
        list-style: none;
        float: left;
    }
    img{
        width: 500px;
        height: 200px;
    }
    #goright{
        text-align: center;
        line-height: 50px;
        width: 50px;
        height: 50px;
        position: absolute;
        top: 100px;
        right: 0px;
        font-weight: bold;
        font-size: 18px;
    }
    #goleft{
        text-align: center;
        line-height: 50px;
        width: 50px;
        height: 50px;
        position: absolute;
        top: 100px;
        left:0;
        font-weight: bold;
        font-size: 18px;
    }
    #goright:hover,#goleft:hover{
        background-color: white;
        cursor: pointer;
    }
</style>
<body>
    <div class="bigbox">
        <ul class="slider">
            <li><img src="img/dav2.jpg" alt=""></li>
            <li><img src="img/star.jpg" alt=""></li>
            <li><img src="img/stock.jpg" alt=""></li>
        </ul>
        <div id="goright">--></div>
        <div id="goleft"><--</div>
    </div>
</body>
<script>
    var goright = document.getElementById("goright");
    var goleft = document.getElementById("goleft");
    var slide = document.getElementsByClassName("slider")[0];
    var num = 0;
    console.log(slide.style.left);
    function rightgo(){
       if(num == 1000){
           num = 0;
           slide.style.left = "0px";
        }else{
           num+=500;
           slide.style.left = -num + "px";
       }
    }
    function leftgo() {
        if(num == 0){
            num = 1000;
            slide.style.left="-1000px";
        }else{
            num-=500;
            slide.style.left=-num+"px";
        }
    }
    var time ;
    time = setInterval(function () {
        rightgo();
    },5000)
    goright.onclick=rightgo;
    goleft.onclick=leftgo;
</script>
</html>